<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>路线详情</title>
    <link rel="stylesheet" type="text/css" href="css/route-detail.css">
</head>

<body>
<jsp:include page="header.jsp"></jsp:include>

<!-- 详情 -->
<div class="wrap" id="detail">
    <div class="bread_box">
        <a href="index.jsp">首页</a>
        <span> &gt;</span>
        <a href="#" v-if="routeAll.category">{{routeAll.category.cname}}</a><span> &gt;</span>
        <a href="#">{{routeAll.rname}}</a>
    </div>
    <div class="prosum_box">
        <dl class="prosum_left">
            <dt>
                <img alt="" class="big_img"
                     :src="routeAll.rimage">
            </dt>
            <dd>
                <a class="up_img up_img_disable"></a>
                <a title="" v-for="(routeImg,index) in routeAll.routeImgList" class="little_img" :data-bigpic="routeImg.bigPic" :style="index<4?'':'display:none;'">
                    <img :src="routeImg.smallPic">
                </a>


                <a class="down_img down_img_disable" style="margin-bottom: 0;"></a>
            </dd>
        </dl>
        <div class="prosum_right">
            <p class="pros_title">{{routeAll.rname}}</p>
            <p class="hot">{{routeAll.description}}</p>
            <div class="pros_other">
                <p v-if="routeAll.seller">{{routeAll.seller.sname}}</p>
                <p v-if="routeAll.seller">{{routeAll.seller.consphone}}</p>
                <p v-if="routeAll.seller">{{routeAll.seller.address}}</p>
            </div>
            <div class="pros_price">
                <p class="price">
                    <strong>￥{{routeAll.price}}</strong>
                </p>
                <div class="p_number">
                    <div class="f_l add_chose">
                        <a class="reduce" onClick="setAmount.reduce('#qty_item_1')" href="javascript:void(0)">-</a>
                        <input type="text" name="qty_item_1" value="1" id="qty_item_1"
                               onKeyUp="setAmount.modify('#qty_item_1')" class="text"/>
                        <a class="add" onClick="setAmount.add('#qty_item_1')" href="javascript:void(0)">+</a>
                    </div>
                    <span class="collect">
                         <a class="btn" href="#" id="addCart"><i class="glyphicon glyphicon-heart-empty"></i>加入购物车</a>
                    </span>
                </div>

            </div>
        </div>
    </div>
</div>

<script>
    let route_data = new Vue({
        el: "#detail",
        data: {
            routeAll:{}
        },
        methods: {
            findRouteByRid(rid){
                axios.get("/routeServlet?action=findRouteByRid&rid="+rid).then(resp=>{
                   this.routeAll = resp.data;
                   console.log(this.routeAll)
                })
            }
        },
        created() {
            let rid = location.search.split("=")[1];
            if (rid){
                this.findRouteByRid(rid);
            }
        }
    });
</script>

<jsp:include page="footer.jsp"></jsp:include>
<script>
    $(document).ready(function () {
        //焦点图效果
        //点击图片切换图片
        $('.little_img').on('mousemove', function () {
            $('.little_img').removeClass('cur_img');
            var big_pic = $(this).data('bigpic');
            $('.big_img').attr('src', big_pic);
            $(this).addClass('cur_img');
        });
        //上下切换
        var picindex = 0;
        var nextindex = 4;
        $('.down_img').on('click', function () {
            var num = $('.little_img').length;
            if ((nextindex + 1) <= num) {
                $('.little_img:eq(' + picindex + ')').hide();
                $('.little_img:eq(' + nextindex + ')').show();
                picindex = picindex + 1;
                nextindex = nextindex + 1;
            }
        });
        $('.up_img').on('click', function () {
            var num = $('.little_img').length;
            if (picindex > 0) {
                $('.little_img:eq(' + (nextindex - 1) + ')').hide();
                $('.little_img:eq(' + (picindex - 1) + ')').show();
                picindex = picindex - 1;
                nextindex = nextindex - 1;
            }
        });
        //自动播放
        // var timer = setInterval("auto_play()", 5000);
    });

    //自动轮播方法
    function auto_play() {
        var cur_index = $('.prosum_left dd').find('a.cur_img').index();
        cur_index = cur_index - 1;
        var num = $('.little_img').length;
        var max_index = 3;
        if ((num - 1) < 3) {
            max_index = num - 1;
        }
        if (cur_index < max_index) {
            var next_index = cur_index + 1;
            var big_pic = $('.little_img:eq(' + next_index + ')').data('bigpic');
            $('.little_img').removeClass('cur_img');
            $('.little_img:eq(' + next_index + ')').addClass('cur_img');
            $('.big_img').attr('src', big_pic);
        } else {
            var big_pic = $('.little_img:eq(0)').data('bigpic');
            $('.little_img').removeClass('cur_img');
            $('.little_img:eq(0)').addClass('cur_img');
            $('.big_img').attr('src', big_pic);
        }
    }
</script>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    a, img {
        border: 0;
        text-decoration: none;
    }

    body {
        font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
    }

    /* p_number */
    .p_number {
        border: solid 1px #ddd;
        padding: 10px 0 0 10px;
        width: 480px;
        height: 80px;
        margin: 30px auto;
    }

    .p_number .f_l {
        float: left;
    }

    .p_number .add_chose {
        width: 105px;
    }

    .p_number .add_chose a {
        float: left;
        margin: 5px 0 0 0;
        display: block;
        width: 15px;
        height: 15px;
        line-height: 99em;
        overflow: hidden;
        background: url(images/reduce-add.gif) no-repeat;
    }

    .p_number .add_chose a.reduce {
        background-position: 0 0;
    }

    .p_number .add_chose a.reduce:hover {
        background-position: 0 -16px;
    }

    .p_number .add_chose a.add {
        background-position: -16px 0;
    }

    .p_number .add_chose a.add:hover {
        background-position: -16px;
    }

    .p_number .add_chose .text {
        float: left;
        margin: 0 5px;
        display: inline;
        border: solid 1px #ccc;
        padding: 4px 3px 4px 8px;
        width: 40px;
        line-height: 18px;
        font-size: 14px;
        color: #990000;
        font-weight: 800;
    }

    .p_number .buy {
        line-height: 2em;
    }

    .p_number .buy .total-font {
        font-family: Arial;
        font-size: 26px;
    }

    .p_number .buy .jifen {
        margin-left: 20px;
        color: #ACACAC;
    }

    .p_number .buy .jifen b {
        margin: 0 3px;
    }
</style>
</body>
</html>
